<template>
  <div class="container">
    <Breadcrumb :items="['menu.visualization', 'menu.visualization.dataAnalysis']" />
    <a-space direction="vertical" :size="12" fill>
      <a-space direction="vertical" :size="16" fill>
        <div class="space-unit">
          <PublicOpinion />
        </div>
        <div>
          <a-grid :cols="24" :col-gap="16" :row-gap="16">
            <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 16, xxl: 16 }">
              <ContentPublishRatio />
            </a-grid-item>
            <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 8, xxl: 8 }">
              <PopularAuthor />
            </a-grid-item>
          </a-grid>
        </div>
        <div>
          <ContentPeriodAnalysis />
        </div>
      </a-space>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
import PublicOpinion from './components/public-opinion.vue'
import ContentPeriodAnalysis from './components/content-period-analysis.vue'
import ContentPublishRatio from './components/content-publish-ratio.vue'
import PopularAuthor from './components/popular-author.vue'
</script>

<script lang="ts">
export default {
  name: 'DataAnalysis',
}
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
  margin-bottom: 20px;
}

.space-unit {
  background-color: var(--color-bg-2);
  border-radius: 4px;
}

.title-fix {
  margin: 0 0 12px 0;
  font-size: 14;
}
:deep(.section-title) {
  margin: 0 0 12px 0;
  font-size: 14px;
}
</style>
